<template>
    <el-dialog v-model="dialogVisible" title="角色详情" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>
        <div class="editView">
            <div class="title">编辑部门</div>
            <el-form :model="form" ref="formRef" inline label-width="130px" class="deptForm">
                <el-form-item label="部门名称" prop="deptName">
                    <el-input v-model="form.deptName" />
                </el-form-item>
                <el-form-item label="上级部门" prop="parentName">
                    <el-input v-model="form.parentName" disabled />
                </el-form-item>
                <el-form-item label="部门编码" prop="deptCode">
                    <el-input v-model="form.deptCode" />
                </el-form-item>
                <el-form-item label="单位地址" prop="address">
                    <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item label="单位负责人" prop="leader">
                    <el-input v-model="form.leader" />
                </el-form-item>
                <el-form-item label="单位负责人电话" prop="phone">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="单位负责人邮箱" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>
            </el-form>

            <div class="footer">
                <el-button type="primary" @click="onConfirm">保存</el-button>
                <el-button @click="emits('cancel')">取消</el-button>
            </div>
        </div>
    </el-dialog>

</template>

<script setup>
import { ref, } from "vue";

import { deptSave } from "../../utils/requests";

import { ElMessage } from "element-plus";
const emits = defineEmits(["cancel", "success"]);

const form = ref({
    deptName: "",
    parentId: null,
    parentName: "",
    deptCode: "",
    address: "",
    leader: "",
    phone: "",
    email: ""

});

let dialogVisible = ref(false);

const setData = (data) => {
    form.value = { ...data };
};

const onConfirm = () => {
    if (!form.value.deptName) {
        ElMessage.error("部门名称不能为空");
        return;
    }
    if (!form.value.deptCode) {
        ElMessage.error("部门编码不能为空");
        return;
    }

    deptSave(form.value).then(() => {
        ElMessage.success("保存成功");

        dialogVisible.value = false;

        emits("success");
    }).catch((error) => {
        ElMessage.error(error.message || "保存失败");
    });



};

defineExpose({
    setData
});

</script>

<style scoped lang="scss">
.editView {
    padding: 5px 20px;

    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 25px;
    }

    .deptForm {
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            flex: 0 0 50%;
            box-sizing: border-box;
            margin-right: 0;
        }
    }

    .footer {
        margin-top: 20px;
        text-align: right;

        .el-button {
            margin-left: 10px;
        }
    }
}
</style>
